
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Cherry-pick、Revert 和 Reset 的正确用法 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>Cherry-pick、Revert 和 Reset 的正确用法 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">git cherry-pick 命令的核心作用是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">git cherry-pick 允许选择性地将某个提交（commit）应用到当前分支，常用于从一个分支挑选某个提交移植到另一个分支，而无需合并整个分支。</div>
          </div>
          <div class="card-source">来源: 一、Cherry-pick —— 选择性提交 -> 1.1 Cherry-pick 是什么？</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">在何种开发场景下，使用 git cherry-pick 会特别有用？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">当一个功能分支上有多个提交，但你只需要将其中一个特定的提交（例如一个紧急的 bug 修复）快速应用到主分支（如 master），而不想引入其他未完成的功能时，cherry-pick 就非常有用。</div>
          </div>
          <div class="card-source">来源: 一、Cherry-pick —— 选择性提交 -> 1.2 使用场景</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">git revert 与 git reset 在处理提交历史方面有何根本区别？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">git revert 不会改变 Git 历史，它通过创建一个新的提交来反向应用指定提交的变更。相比之下，git reset 会改变 Git 历史，它可以将分支回退到某个指定的提交，从而可能删除历史记录中的提交。</div>
          </div>
          <div class="card-source">来源: 二、Revert —— 撤销指定提交 -> 2.1 Revert 是什么？</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">为什么要使用 git revert 来撤销一个有问题的提交，而不是直接修改历史？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">当发现某个提交引入了问题，但又不想直接删除这些提交历史时，git revert 非常有用。它通过创建一个新的“撤销提交”来保留完整的 Git 历史记录，这对于协作开发和代码审计尤为重要。</div>
          </div>
          <div class="card-source">来源: 二、Revert —— 撤销指定提交 -> 2.2 使用场景</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">请解释 git reset 命令的三个常用选项 --soft, --mixed, 和 --hard 分别对工作区、暂存区和HEAD有什么影响？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">--soft：仅修改 HEAD，保留暂存区和工作区的内容。<br>--mixed（默认选项）：修改 HEAD 和暂存区，但保留工作区内容。<br>--hard：同时修改 HEAD、暂存区和工作区，完全回到指定的提交状态，可能会丢失工作区的修改。</div>
          </div>
          <div class="card-source">来源: 三、Reset —— 回退到指定提交 -> 3.3 Reset 的常用选项</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">为什么说 git reset 是一个“危险”的命令，尤其是在使用 --hard 选项时需要特别小心？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">git reset 被认为是“危险”的，因为它会改变 Git 历史。特别是 --hard 选项，它会修改 HEAD、暂存区和工作区，彻底回退到指定提交的状态，这可能导致工作区中未提交的修改被丢弃而丢失，因此需要慎用。</div>
          </div>
          <div class="card-source">来源: 三、Reset —— 回退到指定提交 -> 3.1 Reset 是什么？ & 3.3 Reset 的常用选项</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
